<template>
  <div class="main">
    <div class="timeDiv">
      <div class="lineDiv"></div>
      <div class="itemDiv" v-for="(item, index) in timeList" :key="index">
        <div :class="['contentDivs', item.isDiff ? 'diffBg' : '', (index + 1) % 2 == 0 ? 'bottomDiv' : '']" :style="{ left: item.position }">
          <p>
            <span>{{ item.nx }}</span
            >年
          </p>
          <p>{{ item.type }}</p>
        </div>

        <div class="drop" :style="{ left: 'calc( ' + item.position + ' + 8vh)' }"></div>
      </div>
    </div>
    <div class="treeDiv">
      <div id="treecontentDiv"></div>
    </div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6'

export default {
  name: 'Qzq',
  components: {},
  data() {
    return {
      graph: null,
      treeLeftData: [
        {
          id: 1,
          name: '工程质量',
          indexY: -140,
          children: [
            {
              id: 2,
              name: '合格',
              indexY: -140
            }
          ]
        },
        {
          id: 10,
          name: '防洪安全性',
          indexY: -30,
          children: [
            {
              id: 11,
              name: 'A级',
              indexY: -30
            }
          ]
        },
        {
          id: 20,
          name: '结构安全性',
          indexY: 80,
          children: [
            {
              id: 21,
              name: 'A级',
              indexY: 80
            }
          ]
        },
        {
          id: 30,
          name: '金属结构安全',
          indexY: 190,
          children: [
            {
              id: 31,
              name: 'A级',
              indexY: 190
            }
          ]
        }
      ],
      treeRightData: [
        {
          id: 10000,
          name: '运行管理',
          indexY: -120,
          children: [
            {
              id: 100001,
              name: '规范',
              indexY: -120
            }
          ]
        },
        {
          id: 10010,
          name: '渗流性态安全性',
          indexY: 0,
          children: [
            {
              id: 10011,
              name: 'A级',
              indexY: 0
            }
          ]
        },
        {
          id: 10020,
          name: '抗震安全性',
          indexY: 120,
          children: [
            {
              id: 10021,
              name: 'A级',
              indexY: 120
            }
          ]
        }
      ],
      timeList: [
        {
          nx: 11,
          type: '一类坝',
          isDiff: false,
          position: '3%'
        },
        {
          nx: 17,
          type: '一类坝',
          isDiff: false,
          position: '23.5%'
        },
        {
          nx: 23,
          type: '一类坝',
          isDiff: true,
          position: '44%'
        },
        {
          nx: 29,
          type: '未鉴定',
          isDiff: false,
          position: '64.5%'
        },
        {
          nx: 35,
          type: '未鉴定',
          isDiff: false,
          position: '85%'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.renderTree()
  },
  methods: {
    renderTree() {
      var graphDatas = []
      var x = 0
      var y = 0
      graphDatas.push({
        id: 0,
        shape: 'firstRect',
        width: 180,
        height: 60,
        position: {
          x: x,
          y: y
        },
        label: '一类坝'
      })

      this.treeLeftData.forEach((item, index) => {
        graphDatas.push({
          id: item.id,
          shape: 'itemRect',
          width: 180,
          height: 60,
          position: {
            x: x - 350,
            y: item.indexY
          },
          label: item.name
        })
        graphDatas.push({
          id: 100 + index,
          shape: 'connectLine',
          source: item.id,
          target: 0
          // vertices: [
          //   { x: x - 80, y: item.indexY },
          //   { x: x - 80, y: y + 40 },
          //   { x: x, y: y + 40 }
          // ]
        })

        item.children.forEach((ite, inde) => {
          graphDatas.push({
            id: ite.id,
            shape: 'itemRect2',
            width: 100,
            height: 60,
            position: {
              x: x - 550,
              y: ite.indexY
            },
            label: ite.name
          })
          graphDatas.push({
            id: 1000 + index * 10,
            shape: 'connectLine',
            source: ite.id,
            target: item.id
          })
        })
      })

      graphDatas.push({
        id: 123,
        shape: 'firstRect',
        width: 180,
        height: 60,
        position: {
          x: x,
          y: y
        },
        label: '一类坝'
      })
      this.treeRightData.forEach((item, index) => {
        graphDatas.push({
          id: item.id,
          shape: 'itemRect',
          width: 180,
          height: 60,
          position: {
            x: x + 350,
            y: item.indexY
          },
          label: item.name
        })
        graphDatas.push({
          id: 100000 + index * 10,
          shape: 'connectLine',
          source: 123,
          target: item.id,
          vertices: [
            { x: x + 280, y: item.indexY + 30 }
            // { x: x + 280, y: y + 40 }
          ]
        })

        item.children.forEach((ite, inde) => {
          graphDatas.push({
            id: ite.id,
            shape: 'itemRect2',
            width: 100,
            height: 60,
            position: {
              x: x + 650,
              y: ite.indexY
            },
            label: ite.name
          })
          graphDatas.push({
            id: 1000000 + index * 10,
            shape: 'connectLine',
            source: item.id,
            target: ite.id
          })
        })
      })

      this.graphDatas = graphDatas
      Graph.registerNode(
        'firstRect',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'rect',
              selector: 'body'
            },
            {
              tagName: 'text',
              selector: 'label'
            }
          ],
          attrs: {
            body: {
              stroke: '#8693DB',
              fill: '#194581',
              strokeWidth: 1,
              rx: 30,
              ry: 30
            },
            label: {
              fontSize: 40,
              fill: '#fff',
              fontFamily: 'YouSheBiaoTiHei',
              textAnchor: 'middle'
            }
          }
        },
        true
      )

      const male = require('@/assets/img/common/kvBg3.png')
      Graph.registerNode(
        'itemRect',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'image',
              selector: 'avatar'
            },
            {
              tagName: 'text',
              selector: 'label'
            }
          ],
          attrs: {
            avatar: {
              'xlink:href': male,
              width: 178,
              height: 60
            },
            label: {
              fontSize: 18,
              fill: '#fff',
              fontFamily: 'Source Han Sans CN'
            }
          }
        },
        true
      )

      const male2 = require('@/assets/img/common/kvBg2.png')
      Graph.registerNode(
        'itemRect2',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'image',
              selector: 'avatar'
            },
            {
              tagName: 'text',
              selector: 'label'
            }
          ],
          attrs: {
            avatar: {
              'xlink:href': male2,
              width: 100,
              height: 60
            },
            label: {
              fontSize: 18,
              fill: '#fff',
              fontFamily: 'Source Han Sans CN'
            }
          }
        },
        true
      )

      Graph.registerEdge(
        'connectLine',
        {
          inherit: 'edge',
          attrs: {
            line: {
              stroke: '#BBC6C4',
              strokeWidth: 2,
              targetMarker: null
            }
          }
        },
        true
      )

      this.graph = new Graph({
        container: document.getElementById('treecontentDiv'),
        width: '100%',
        height: '100%',
        scroller: {
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false
        },
        autoResize: true,
        panning: {
          enabled: false
        },
        connecting: {
          router: 'orth',
          sourceAnchor: {
            name: 'right', // 锚点会在节点右侧中心往上偏移 10px
            args: {
              dy: 0
            }
          },
          targetAnchor: {
            name: 'left', // 锚点会在节点右侧中心往上偏移 10px
            args: {
              dy: 0
            }
          },
          connectionPoint: 'anchor'
        },
        interacting: function (cellView) {
          if (cellView.cell) {
            return { nodeMovable: false }
          }
          return true
        }
      })
      const cells = []
      this.graphDatas.forEach((item) => {
        if (item.shape === 'connectLine') {
          cells.push(this.graph.createEdge(item))
        } else {
          cells.push(this.graph.createNode(item))
        }
      })
      this.graph.resetCells(cells)
      this.graph.centerContent()
      this.graph.render()

      // 使用fitView方法，并尝试通过其他方式调整居中效果
      this.graph.fitView()
      this.graph.zoomToFit({ padding: 10, maxScale: 1 })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/img/bg.png') no-repeat;
  background-size: 100%;
  padding: 15vh 15vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .timeDiv {
    width: 100%;
    height: auto;
    position: relative;
    .lineDiv {
      width: 100%;
      height: 1px;
      background: #fff;
      position: absolute;
      top: 13vh;
    }
    .itemDiv {
      .contentDivs {
        position: absolute;
        top: 6vh;
        width: 8vw;
        height: 5vh;
        background: url('@/assets/img/common/timeBg.png') no-repeat;
        background-size: 100%;
        display: flex;
        align-items: baseline;
        justify-content: center;

        p:nth-child(1) {
          margin-right: 1vw;
        }
        p {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.7vh;
          color: #ffffff;
          span {
            font-weight: bold;
            font-size: 3vh;
          }
        }
      }
      .drop {
        width: 13px;
        height: 13px;
        background: #0270d3;
        border-radius: 50%;
        border: 2px solid #ffffff;
        position: absolute;
        top: calc(13vh - 5px);
      }
      .diffBg {
        background: url('@/assets/img/common/timeBg2.png') no-repeat;
        background-size: 100%;
      }
      .bottomDiv {
        top: 15vh;
      }
    }
  }
  .treeDiv {
    width: 100%;
    height: 50vh;
    // border: 1px solid #fff;
    margin-top: 20vh;
    #treecontentDiv {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
